<template>
  <div style="position: absolute;top: 0px; bottom: 0px; width: 100%; background: white;}">
    <van-row>
      <van-col span="24">
        <van-nav-bar fixed :border="false" style="background: none;"
                     @click-left="onClickLeft"
                     placeholder
                     safe-area-inset-top >
          <template #left>
            <van-icon color="black" style="font-weight:bolder;" name="arrow-left" size="20" />
            <span>返回</span>
          </template>
        </van-nav-bar>
      </van-col>

      <van-col span="24" style="margin-top: 6rem;">
        <van-cell-group :border="false" style="background: none;">
          <van-cell  :border="false" style="background: none;">
            <template #title>
              <span style="font-size: 1.5rem; letter-spacing:.1em; padding-left: 10px; font-weight: bolder;">账号注册</span>
            </template>
            <template #label>
              <span style="font-size: 1rem; letter-spacing:.1em; padding-top: 1rem; display: block; padding-left: 10px;">请输入手机号</span>
            </template>
          </van-cell>
          <van-cell :border="false" style="background: none; margin-top: 1rem;">
            <van-form @submit="onSubmit">
              <van-field
                  v-model="authCode"
                  name="用户名"
                  clearable
                  center
                  placeholder="请输入手机号码"
                  :rules="[{ required: true, message: '请填写用户名' }]"
              >
                <template #label>
                  <div style="display: flex; align-items: center; font-size: 1.2em; font-weight: bolder;">
                    <span>+86</span>
                    <van-icon style="padding-left: 10px;" name="arrow-down" />
                  </div>
                </template>
              </van-field>
              <div style="margin: 16px;">
                <van-button  round block type="info" native-type="submit">同意协议并注册</van-button>
              </div>
              <span style=" padding-left: 20px; color:#8c8c8c; ">已阅读并同意</span>
              <span style="color:#2e62cd; ">《用户服务协议》</span>
            </van-form>
          </van-cell>

        </van-cell-group>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "regiest",
  data(){
    return{
      authCode:'',
    }
  },
  methods:{
    onClickLeft(){
      this.$router.replace("/Login")
    },
    onSubmit(){
      this.$toast.loading({
        message: '发送验证码中...',
        forbidClick: true,
        onClose:()=>{this.$router.replace("/authCode");}
      });
    }
  }
}
</script>

<style scoped>

</style>
